<template>
	<view class="content">
		<view class="wrap"
			:style="{background: 'url('+imageSrc+'/static/activity/renBaomian.jpg)',backgroundSize:'100% 100%'}">
			<view class="details" v-if="!userMobile">
				<!-- <view class="title">你的红包数量</view> -->
				<!-- <view class="amount">{{shareInfo || '?'}}<text>个</text></view> -->
				<!-- <view class="amount">***<text>个</text></view> -->
			</view>
			<view class="details" v-else>
				<!-- <view class="title">您已经激活成功！</view> -->
				<!-- <view class="amount">****<text>个</text></view> -->
			</view>
			<view class="receive-btn" @click="getUserPhone()" v-if="!userMobile">
				<text>立即激活领取</text>
			</view>
			<view class="receive-btn" @click="goToMiniProgram()" v-else>
				<text>领取返回</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view v-if="mobileshow" class="alert">
				<view class="auth">
					<view class="apply">
						<span class="">需要获取您的手机权限</span>
						<p>(请开启手机权限)</p>
					</view>
					<button class="confirm" v-if="canIUse" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">确认</button>
				</view>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import activity from '@/service/activity.js'
	import service_enter from '@/service/login.js'
	import URL from '@/config/url.js'
	export default {

		data() {
			return {
				imageSrc: this.$static,
                 shareInfo:'',
				 mobileshow: false,
				 token: null, // token
				 isBindMobile: false, // 是否绑定手机号
				 userMobile: '', // 用户手机号
				 userId: null, // 用户userId
				 canIUse: uni.canIUse('button.open-type.getUserInfo'),
				 openid:'',
				 nickName:'',
				 avatarUrl:'',
				 bind_mobile_status:0,
				 programuser_id:"",
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			let app = getApp();
			this.programuser_id = app.globalData.programuser_id
			this.getShareStatistics();
		},
		onShow() {
		},
		methods: {
			//跳回正式小程序
			goToMiniProgram() {
				uni.navigateToMiniProgram({
					appId: 'wx66230223cee807f1',
					path: '/pages_activity/pages/giftBag/giftBag/index',
					extraData: {
						mobile: this.userMobile,
					},
					success(res) {
						console.log(res)
						// 打开成功
					}
				})
			},

			//分享统计
			getShareStatistics() {
				activity.shareStatistics({
						share_user_id:this.programuser_id,
					})
					.then(res => {
						if (res.code == 1) {
							let data = res.data;
							this.shareInfo = data.totalOrder;
						} else {
							this.shareInfo = '';
						}
					})
					.catch(err => {

					})
			},
			getUserPhone() {
				let that = this
				let single_id = uni.getStorageSync('single_id')
				let root = uni.getStorageSync('root') == "true" ? true : false
				let product_id = uni.getStorageSync('id')
				let gid = uni.getStorageSync('gid')
				let u = uni.getStorageSync('u')
				let NewName = uni.getStorageSync('NewName')
				// console.log(product_id,gid,u,'============')
				uni.getUserProfile({
					desc: '用于完善会员资料',
					lang: 'zh_CN',
					success: e => {
						uni.setStorageSync('userInfo', e.userInfo)
						// 统计获取用户信息
						gio('setVisitor', e.userInfo);
						that.nickName = e.userInfo.nickName
						that.avatarUrl = e.userInfo.avatarUrl
						that.$utils.login({
							success: (res) => {
								// console.log(res);
								service_enter.getToken({
										code: res.code,
										nickName: that.nickName,
										avatarUrl: that.avatarUrl,
										sence: '',
										wx_access_token: '',
										unionid: '',
										openid: '',
									})
									.then(res => {
										uni.hideLoading()
										if (res.code == 1) {
											// console.log(res);
											let data = res.data
											that.openid = res.data.openid;
											if (!data.mobile || data.mobile == '') {
												that.mobileshow = true
											} else {
												let userMobile = res.data.mobile
												this.userMobile = userMobile
												this.bind_mobile_status = data
													.bind_mobile_status
												uni.setStorageSync('token', token);
											}
										} else {
											that.$utils.hideLoading()
											that.$utils.showErr({
												title: res.msg
											})
										}
									})
							}
						})
					}
				})
				// uni.showLoading({title: '加载中',mask:true});
			},
			//手机号绑定
			getPhoneNumber(e) {
				this.$utils.hideLoading()
				let encryptedData = e.detail.encryptedData
				let iv = e.detail.iv
				let page = e.currentTarget.dataset.page
				let shareuId = this.$store.state.index.shareuId || ''
				if (encryptedData && iv) {
					this.$utils.showLoading({
						title: '绑定中...'
					})
					service_enter.bindUserPhone({
							encryptedData: encryptedData,
							iv: iv,
							openid: this.openid,
							nickName: this.nickName,
							avatarUrl: this.avatarUrl,
						})
						.then(res => {
							this.$utils.hideLoading()
							console.log(res)
							if (res.code == 1) {
								this.mobileshow = false
								let data = res.data
								// 保存数据
								let token = data.token.access_token
								let userId = data.user_id
								let userMobile = data.mobile
								this.openid = ''
								// 保存数据
								this.token = token
								this.userMobile = userMobile
								this.userId = userId
								this.bind_mobile_status = data.bind_mobile_status
								uni.setStorageSync('token', token);

							} else {
								this.$utils.hideLoading()
								this.$utils.showErr({
									title: res.msg
								})
							}
						})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.wrap {
			width: 100%;
			height: 100vh;

			.details {
				width: auto;
				position: absolute;
				top: 50%;
				left: 53%;
				z-index: 100;
				transform: translate(-53%, -50%);

				.title {
					text-align: center;
					font-size: 48rpx;
					color: #736a64;
					margin: 60rpx 0 20rpx 0;
				}

				.amount {
					justify-content: center;
					display: flex;
					text-align: center;
					color: #ff2f31;
					font-size: 72rpx;
					font-weight: bold;

					text {
						font-size: 38rpx;
						margin: 12rpx 0 0 4rpx;
					}
				}
			}

			.receive-btn {
				width: 340rpx;
				height: 84rpx;
				position: absolute;
				left: 50%;
				transform: translate(-50%, -75%);
				top: 75%;
				border-radius: 84rpx;
				background:linear-gradient(180deg, #F9EAB1, #F5CC7C);
				color: #DE3B29;
				font-size: 30rpx;
				font-weight: bold;
				text-align: center;
				line-height: 84rpx;
			}

			.alert {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				overflow: hidden;
				outline: 0;
				-webkit-overflow-scrolling: touch;
				background-color: rgb(0, 0, 0);
				filter: alpha(opacity=60);
				background-color: rgba(0, 0, 0, 0.6);
				z-index: 9999;

				.auth {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 80%;
					height: 340rpx;
					border-radius: 20rpx;
					overflow: hidden;
					transform: translate(-50%, -50%);
					background: #fff;
					display: flex;
					flex-direction: column;

					.apply {
						margin: 0rpx auto;
						padding: 60rpx 40rpx;
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						font-size: 34rpx;
						color: rgb(34, 34, 34);

						p {
							font-size: 30rpx
						}
					}

					.confirm {
						border-top: 1rpx solid rgb(221, 221, 221);
						text-align: center;
						height: 100rpx;
						width: 100%;
						line-height: 100rpx;
						font-size: 34rpx;
						color: rgb(255, 145, 37);
					}
				}
			}

		}
	}
</style>
